<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>{{ title }}</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body { background: #f8f9fa; }
        .main-title { font-size: 2.2em; margin: 60px 0 30px 0; font-weight: bold; }
        .main-gif { margin-bottom: 30px; }
        .start-btn {
        padding: 12px 32px;
        font-size: 1.2em;
    }
    </style>
</head>
<body>
    {{> navbar}}
    <div class="container-fluid p-5 bg-primary text-white text-center" style="height: auto; max-height: 30vh;">
        <div class="main-title">{{ title }}</div>
    </div>
    <div class="container mt-4 text-center">
        <div class="main-gif">
            <img src="/static/images/seggpt_demo.gif" alt="Demo" class="img-fluid rounded shadow" style="max-width:480px;">
        </div>
        <div class="d-flex justify-content-center gap-5" style="max-width: 600px; margin: 0 auto;">
            <div class="col-6 text-end">
                <form action="/start_guide" method="get">
                    <button class="btn btn-primary start-btn w-50" type="submit">开始上手</button>
                </form>
            </div>
            <div class="col-6 text-start">
                <form action="/dashboard" method="get">
                    <button class="btn btn-success start-btn w-50" type="submit">启动</button>
                </form>
            </div>
        </div>
    </div>
    {{> footer}}
</body>
</html>